<template>
  <div id="prompt" :style="{width:commons.promptWidth,height:commons.promptHeight}">
    <div class="prompt-top">
      <span>{{ commons.same }}</span>
      <img src="@/assets/icons/svg/closeBtn.png" alt="" />
    </div>
    <div class="prompt-center">
      <slot></slot>
    </div>
    <div class="prompt-right" :style="{justifyContent:commons.aligin}">
      <el-button v-for="item in commons.btn" :key="item" type="primary" round class="btn">{{ item }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Prompt',
  props: {
    commons: Object
  }
};
</script>

<style>
#prompt{
  background: #FFFFFF;
  border-radius: 10px;
  position: relative;
}
.prompt-top{
  height: 48px;
  background: #508FCC;
  font-size: 18px;
  font-weight: 400;
  line-height: 48px;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  padding: 0px 18px 0px 28px ;
  align-items: center;
}
.prompt-top img{
  width: 36px;
  height: 36px;
}
#prompt .btn{
  font-size: 16px;
  font-weight: 400;
  padding: 6px 12px;
  margin-right: 16px;
}
.prompt-right{
  width: 100%;
  border-top:#E6E6E6 solid 1px ;
  height: 60px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: flex;
  /*justify-content: flex-end;*/
  align-items: center;
  padding-right: 4px ;
}
</style>
